<template>
    <div class="section-4">
        <div class="container">
            <div class="title">
                <h2>结构细节</h2>
            </div>
            <div class="details">
                <div class="example">
                    <div class="bear">
                        <img src="./images/bear-structure.png" class="structure">
                        <img v-show="show" src="./images/bear-structure-detail.png" class="detail animated fadeIn" style="animation-delay: 0.2s;">
                    </div>
                    <div class="legend animated bounceInUp" v-show="show" style="animation-delay: 0.2s;">
                        <div>毛发包裹层</div>
                        <div>硅胶包裹层</div>
                        <div>结构包裹层</div>
                    </div>
                </div> 
            </div>
            <div class="flex-grow">
                <div class="flex-item">
                    <div class="img"><img src="./images/bear-structure-detail-1.png" alt=""></div>
                    <p>热传导的方案，通过导热片（带）将结构内部发热体的热量传导至硅胶包裹层，同步解决内部器件散热及提供仿生动物体温的功能体验。</p>
                </div>
                <div class="flex-item">
                    <div class="img"><img src="./images/bear-structure-detail-2.png" alt=""></div>
                    <p>躯干四肢结构设计采用结构包裹层全面包裹内部结构，提供平滑无缝隙的外表结构，以便附着硅胶层及毛发层。</p>
                </div>
                <div class="flex-item">
                    <div class="img"><img src="./images/bear-structure-detail-3.png" alt=""></div>
                    <p>关节连续部嵌入可弯曲活动材质且具备一定强度、抗压性的材料。</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'section-4',
	data () {
		return {
            offsetTop:'',
            show:false
		}
    },
    mounted() {
        this.offsetTop = $('.section-4').offset().top
        window.addEventListener('scroll', this.handleScroll)
    },
    methods:{
        handleScroll(){
            if($(window).scrollTop() > this.offsetTop - 500){
                this.show = true;
            }else{
                this.show = false;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.section-4{
    color:#fff;
    padding-bottom:100px;
    background-image: url(./images/ge.png);
    background-repeat:repeat;
    overflow: hidden;
    .title{
        text-align: center;
        padding:75px 0 60px 0;
        h2{
            font-size:30px;
            color:#fff;
            line-height:25px;
        }
    }
    .details{
        margin:80px 0 100px 0;
        .example{
            height:450px;
            display:flex;
            position: relative;
            .bear{
                width:730px;
                max-width:100%;
                margin: 0 auto;
                position: relative;
                .structure{
                    max-width:100%;
                }
                .detail{
                    width:40%;
                    position: absolute;
                    top: -10%;
                    right: -3%;
                }
            }
            .legend{
                position: absolute;
                bottom:80px;
                right:0;
                div{
                    font-size:16px;
                    margin-top:30px;
                    padding-left:35px;
                    position: relative;
                    &:before{
                        content:'';
                        display: inline-block;
                        width:12px;
                        height:20px;
                        margin-right:20px;
                        position: absolute;
                        top:0;
                        left:0;
                    }
                    &:nth-child(1){
                        &:before{
                            background:#fff;
                        }
                    }
                    &:nth-child(2){
                        &:before{
                            background:#FFB9B0;
                        }
                    }
                    &:nth-child(3){
                        &:before{
                            background:#7B7E7E;
                        }
                    }
                }
            }
        }
    }
    .flex-grow{
        padding:0 50px;
        .img{
            width:150px;
            height:150px;
            margin:auto;
            img{
                max-width:100%;
            }
        }
        p{
            margin-top:30px;
            line-height:22px;
            padding:0 30px;
            text-align: justify;
        }
    }
}
</style>
